<template>
	<v-layout type="main">
		<div class="alike-lis-header">
			<div class="lis-header-left">
				<div class="add-btn" @click="$router.push({ path: '/gameTask/detail' })">+ 新增</div>

				<div class="btns-switch">
					<div @click="isCard = true">
						<img src="@/assets/img/List_card.png" v-if="isCard" />
						<img src="@/assets/img/list_nocard.png" v-else />
					</div>
					<div @click="isCard = false">
						<img src="@/assets/img/list_nolist.png" v-if="isCard" />
						<img src="@/assets/img/list_list.png" v-else />
					</div>
				</div>

				<div class="search-box">
					<el-input
						prefix-icon="el-icon-search"
						v-model="Pagedata.name"
						class="search"
						placeholder=""
						@input="searchChange"
					/>
				</div>
			</div>

			<!-- <div class="lis-header-right">
				<el-select size="mini" placeholder="请选择" v-model="showThisActive" @change="getData">
					<el-option label="我的模型" value="0"></el-option>
					<el-option label="共享模型" value="1"></el-option>
				</el-select>
			</div> -->
		</div>

		<div class="has-ver-table-layout">
			<div class="table-layout" v-if="!isCard">
				<el-table :data="tableData" class="myself-table">
					<el-table-column prop="name" label="名称">
						<template slot-scope="{ row }">
							<!-- <el-popover placement="right-start" width="320" trigger="hover">
                <row-data :row="row" />
                <el-button type="text" @click="$router.push({ path: '/notebook/code', query: { id: row.id } })"
                  slot="reference">{{ row.name }}</el-button>
              </el-popover> -->

							<!-- <el-button type="text" @click="$router.push({ path: '/notebook/code', query: { id: row.id } })"
                slot="reference">{{ row.name }}</el-button> -->

							<el-button type="text" @click="drawerShowHandler(row)" slot="reference">{{ row.name }}</el-button>
						</template>
					</el-table-column>

					<el-table-column prop="desc" label="描述信息">
						<template slot-scope="{ row }">
							<el-popover placement="top" width="320" trigger="hover" :content="row.desc">
								<span class="desc" slot="reference">{{ row.desc }}</span>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="create_user.nick_name" label="创建用户" align="center" />
					<el-table-column prop="update_user.nick_name" label="更新用户" align="center" />
					<el-table-column prop="update_time" label="更新时间" />

					<el-table-column label="操作" width="200">
						<template slot-scope="{ row }">
							<!--<el-button type="text" @click="put(row)">修改</el-button>-->
							<!-- <el-button type="text" @click="del(row)">删除</el-button> -->
							<!-- <el-popconfirm title="确定删除吗？" @onConfirm="delTask(row)">
								<el-button type="text" slot="reference">删除</el-button>
							</el-popconfirm> -->
							<el-popover placement="top" width="80" trigger="click" v-model="row.visible">
								<p>您确定要删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
									<el-button type="primary" size="mini" @click="delTable(row)">确定</el-button>
								</div>
								<el-button type="text" slot="reference">删除</el-button>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<ul class="alike-lis" v-else>
				<li v-for="(item, index) in tableData" :key="index">
					<div class="alike-lis-box">
						<div class="alike-lis-pic" @click="$router.push({ path: '/gameTask/code', query: { id: item.id } })">
							<v-image :src="item.avatar ? item.avatar : require('@/assets/img/drone3.jpg')" alt="" />
						</div>
						<div class="alike-lis-word">
							<div class="alike-lis-title">
								<span>
									<span @click="$router.push({ path: '/gameTask/code', query: { id: item.id } })">
										{{ item.name }}
									</span>
									<template v-if="typeof item.status === 'string'">
										<el-tag
											type="danger"
											effect="dark"
											size="mini"
											v-if="['terminated', 'failed', 'Failed'].includes(item.status)"
										>
											{{ statusMap[item.status] }}
										</el-tag>
										<el-tag
											type="success"
											effect="dark"
											size="mini"
											v-else-if="['completed', 'Succeeded', 'running', 'Running'].includes(item.status)"
										>
											{{ statusMap[item.status] }}
										</el-tag>   
										<el-tag type="warning" effect="dark" size="mini" v-else>
											{{ statusMap[item.status] }}
										</el-tag>
									</template>
								</span>

								<el-popover placement="top" width="80" trigger="click" v-model="item.visible">
									<p>您确定要删除吗？</p>
									<div style="text-align: right; margin: 0">
										<el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
										<el-button type="primary" size="mini" @click="delTask(item)">确定</el-button>
									</div>
									<i slot="reference" class="el-icon-delete delete-btn" />
								</el-popover>
							</div>

							<p class="alike-lis-hint">{{ item.desc }}</p>
							<p class="alike-lis-hint">版本数量：{{ item.version_index }}</p>

							<div class="alike-lis-user">
								<span class="user-name">创建人：{{ item.create_user.nick_name }}</span>
								<span class="date">{{ item.create_time }}</span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="pagination-box">
			<el-pagination
				background
				class="pagination"
				layout="total, prev, pager, next, jumper"
				:page-size="Pagedata.pageSize"
				:current-page.sync="Pagedata.pageNum"
				@current-change="handleCurrentChange"
				:total="Pagedata.total"
			>
			</el-pagination>
		</div>

		<el-drawer title="版本列表" :visible.sync="drawerShow" direction="rtl">
			<ul class="version-list">
				<li
					class="version-item"
					v-for="item in current.latest_versions"
					:key="item.id"
					@click="$router.push({ path: '/gameTask/code', query: { id: current.id } })"
				>
					<p>
						<span class="title">{{ item.version }}</span>
						<span class="update-time">更新时间：{{ item.update_time }}</span>
					</p>
					<span class="commit">{{ item.commit_msg || "暂无版本提交信息" }}</span>
				</li>
			</ul>
		</el-drawer>
	</v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import {
	addGameTaskVersion,
	getGameTaskVersionDetail,
	getGameTasks,
	delGameTask,
	delGameTaskVersion,
	getGameTaskDetail,
	stopGameTaskVersion,
} from "@/api/gameTask";
export default {
	data() {
		return {
			showThisActive: "0",
			tableData: [],
			Pagedata: {
				pageNum: 1,
				pageSize: 12,
				total: 0,
				name: "",
			},
			nowRouter: this.$route.name,
			// detailData: {},
			// unfold: false,
			forceRerenderKey: 0,
			allChecked: false,
			isCard: false,
			drawerShow: false,
			current: {},
		};
	},
	computed: mapState({
		taskList: (state) => state.gameTaskStore.taskList,
		isCollapse: (state) => state.gameTaskStore.isCollapse,
		detailData: (state) => state.gameTaskStore.detail,
		pageNum: (state) => state.menuStore.pageData.pageNum,
		searchValue: (state) => state.menuStore.searchValue,
	}),
	async created() {
		this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum, name: this.searchValue };
	},
	mounted() {
		let temp = this.$router.options.routes?.filter((e) => e.name == "gameTask" && e.children);
		this.thisRouter = temp[0].children.filter((e) => !e.meta.hideDetails);

		this.getTaskList(this.Pagedata);

		// let resVersion = getGameTaskVersionDetail({ id: row.id })
		// let versionData = resVersion.data

		this.getData();
		// this.$router.push(`/gameTask/code/${this.tableData[0].id}`)
		// this.nowRouter = this.$route.name
	},
	methods: {
		...mapActions(["getTaskList", "updateDetail", "updatePageNum", "updateSearch"]),
		drawerShowHandler(row) {
			this.drawerShow = true;
			this.current = row;
		},
		forceRerender() {
			this.forceRerenderKey += 1;
		},
		unfoldChange(val) {
			this.$store.commit("GAMETASKUNFOLDCHANGE", val);
		},
		tableItemHandler(val) {
			this.updateDetail(val);
			this.unfoldChange(false);

			this.$router.push({
				path: "/gameTask",
				query: {
					id: val.id,
				},
			});

			this.forceRerender();
		},
		skip() {
			// let path = `/gameTask/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
			// if (path == this.$route.path) return
			// this.$router.push({
			//   path,
			//   // query: {
			//   //   id: this.$route.query.id
			//   // }
			// })
		},
		// unfoldChange(val) {
		//   this.unfold = val;
		// },
		async handleChange(data) {
			// console.log(data);
			// let resTask = await getGameTaskDetail({ id: data.id })
			// this.detailData = resTask.data;
			// this.updateDetail(resTask.data)
			this.updateDetail(data);

			// this.$router.push({
			//   path: '/task/code',
			//   query: { id: data.id }
			// })
		},
		async getData() {
			let res = await getGameTasks({ ...this.Pagedata });
			console.log(res, "res");
			this.tableData = res.data.list;
			this.Pagedata.total = res.data.total;
		},
		searchChange() {
			this.updatePageNum(1);
			this.Pagedata.pageNum = 1;
			this.updateSearch(this.Pagedata.name);
			this.getData();
		},
		async delTask({ id }) {
			// let res = await this.$isDel();
			// if (res) {
			await delGameTask({ id });
			this.getData();
			// }
		},
		async delTable(row) {
			// let res = await this.$isDel();
			// if (res) {
			await delGameTask(row);
			this.getData();
			// }
		},
		async copy(row) {
			let resTask = await getGameTaskDetail({ id: row.game_task_id });
			let task = resTask.data;
			let resVersion = await getGameTaskVersionDetail({ id: row.id });
			let versionData = resVersion.data;
			versionData.version = "v" + (task.version_index + 1);
			versionData.copy_version = row.id;
			let ret = await addGameTaskVersion(versionData);
			let newVersionData = ret.data;
			let query = {
				id: task.id,
				source_version_id: newVersionData.id,
			};
			this.$router.push({
				path: "/gameTask/code",
				query,
			});
		},
		async stop(row) {
			await stopGameTaskVersion({ id: row.id });
			this.getData();
		},
		async del(row) {
			await delGameTaskVersion({ id: row.id });
			this.getData();
		},
		handleCurrentChange(val) {
			this.Pagedata.pageNum = val;
			this.updatePageNum(val);
			this.getData();
		},
	},
};
</script>
<style lang="less" scoped>
.desc {
	display: -webkit-inline-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	width: 90%;
}

.version-list {
	padding: 0.625rem 0;

	.version-item {
		line-height: 2em;
		padding: 0.625rem 1.25rem;
		border-bottom: 1px solid #eee;
		cursor: pointer;

		&:hover {
			background: #eee;
		}

		p {
			display: flex;
			justify-content: space-between;
			padding: 0.3125rem 0;
		}

		.title {
			font-size: 20px;
		}

		.commit {
			color: #808080;
			display: -webkit-inline-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			white-space: normal;
			width: 90%;
		}
	}
}

.task-box {
	display: flex;

	.task-container {
		width: 100%;
		// margin-left: 220px;
		margin-left: 460px;
	}
}
</style>
